/*
 * @Author: hongbin
 * @Date: 2022-04-05 21:42:33
 * @LastEditors: hongbin
 * @LastEditTime: 2022-04-06 18:41:39
 * @Description:
 */
import { FC, ReactElement } from "react";

interface IProps {
  name: string;
  val: number;
  unit: string;
  onToggleUnit: (property: string, unit: string) => () => void;
}

const PropItem: FC<IProps> = ({ name, val, unit, onToggleUnit }): ReactElement => {
  return (
    <div>
      <p>{name}</p>
      <input
        value={val}
        onChange={(e) => {
          console.log(e);
        }}
      />
      <button
        onClick={onToggleUnit(name, "vw")}
        title="1vw等于屏幕宽度的1%"
        style={{ background: unit === "vw" ? "#afa" : "#fff" }}
      >
        vw
      </button>
      <button
        onClick={onToggleUnit(name, "vh")}
        title="1vh等于屏幕高度的1%"
        style={{ background: unit === "vh" ? "#afa" : "#fff" }}
      >
        vh
      </button>
    </div>
  );
};

export default PropItem;
